<template lang="pug">
  div#DailyTasks
    div.top-header
      div.current-date(@click="$router.push('/task')") 这里是个日历
      i.iconfont.icon-rili
    div.task-block
      div.task-title
        span.lineae
        span.current-time {{tasksData.currentTime}}
      div.task-list
        div.task-li(v-for="item in tasksData.tasksList")
          div.task-img
            img(:src="item.taskImg")
          span.task-time {{item.taskTime}}
    div.bottom-operation
      span.operation-text 2018年06月
      i.iconfont.icon-fanhui
</template>
<script>
  export default {
    data() {
      return {
        tasksData: {
          currentTime: '07月',
          tasksList: [{
            taskImg: require('@/assets/task/task-img-01.png'),
            taskTime: '2018-07-11'
          }, {
            taskImg: require('@/assets/task/task-img-02.png'),
            taskTime: '2018-07-11'
          }, {
            taskImg: require('@/assets/task/task-img-01.png'),
            taskTime: '2018-07-11'
          }, {
            taskImg: require('@/assets/task/task-img-02.png'),
            taskTime: '2018-07-11'
          }, {
            taskImg: require('@/assets/task/task-img-01.png'),
            taskTime: '2018-07-11'
          }, {
            taskImg: require('@/assets/task/task-img-02.png'),
            taskTime: '2018-07-11'
          }, {
            taskImg: require('@/assets/task/task-img-01.png'),
            taskTime: '2018-07-11'
          }, {
            taskImg: require('@/assets/task/task-img-02.png'),
            taskTime: '2018-07-11'
          }]
        }
      }
    }
  }
</script>
<style scoped lang="less">
  #DailyTasks {
    .top-header {
      .current-date {
        float: left;
      }
      .icon-rili {
        float: right;
      }
    }
    .task-block {
      background: #fff;
      border-top: 1px solid #f5f5f5;
      .task-title {
        padding: 0 20px;
        height: 50px;
        position: relative;
        .lineae {
          height: 1px;
          width: calc(100% - 40px);
          background: #e6e6e6;
          position: absolute;
          top: 24px;
          left: 20px;
        }
        .current-time {
          color: #9c9c9c;
          font-size: 14px;
          position: absolute;
          width: 56px;
          height: 30px;
          background: #fff;
          top: 10px;
          left: 50%;
          margin-left: -28px;
          line-height: 30px;
        }
      }
      .task-list {
        padding: 0 20px;
        overflow: hidden;
        .task-li {
          width: calc(100% / 2 - 7.5px);
          float: left;
          border: 1px solid #e6e6e6;
          box-sizing: border-box;
          margin-bottom: 15px;
          .task-time {
            font-size: 12px;
            color: #9c9c9c;
            height: 34px;
            line-height: 34px;
            display: inline-block;
          }
        }
        .task-li:nth-child(2n+1) {
          margin-right: 15px;
        }
      }
    }
    .bottom-operation {
      position: fixed;
      bottom: 0;
      height: 45px;
      border-top: 1px solid #e6e6e6;
      width: 100%;
      background: #f5f5f5;
      .operation-text {
        color: #9c9c9c;
        font-size: 16px;
        line-height: 45px;
      }
      .iconfont {
        color: #9c9c9c;
        font-size: 16px;
      }
    }
  }
</style>
